<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 最外面大盒子 */
      .all {
        height: 1662px;
        width: 1000px;
        margin: 0 auto;
        /* background-color: pink; */
      }
      /* 顶部蓝条 */
      .rectangle1 {
        width: 1000px;
        height: 24px;
        background-color: #00b7ee;
      }
      /* 顶部导航栏 */
      .top {
        display: flex;
        /* justify-content: space-around; */
        width: 1000px;
        height: 116px;
      }
      /* logo图标 */
      .logo {
        margin: 38px 70px 15px 73px;
      }
      ul {
        list-style-type: none;
        display: flex;
        margin: 76px 48px 25px 0px;
      }
      /* 搜索框 */
      .search {
        margin: 69px 76px 17px 0px;
      }
      /* 图片 */
      .tupian {
        width: 999px;
        height: 400px;
        /* margin-top: 25px; */
      }
      /* 文本内容盒子 */
      .content {
        width: 900px;
        height: 1005px;
        margin: 0 auto;
        border-color: #6db6ff transparent #b6daff transparent;
        border-width: 1px;
        border-style: solid;
        margin-top: 45px;
      }
      .location {
        height: 30px;
        width: 900px;
        line-height: 30px;
      }
      .zhuye{
        height: 30px;
        width: 820px;
        position: relative;
        left: 75px;
        top: -61px;
      }
      /* 长方形 */
      .rectangle2 {
        width: 67px;
        height: 30px;
        background-color: #6db6ff;
        position: relative;
        top: -1px;
        text-align: center;
        line-height: 30px;
      }
      /* 三角形 */
      .triangle {
        border-width: 15px 8px;
        border-style: solid;
        border-color: #6db6ff transparent transparent #6db6ff;
        width: 0;
        position: relative;
        top: -31px;
        left: 67px;
      }
      /* 图片文本框 */
      .center {
        height: 128px;
        margin: 0 auto;
        width: 900px;
      }
      .type
      ,.trade
      ,.region {
        display: flex;
        width: 900px;
        /* margin-top: 30px; */
        /* justify-content: space-between; */
        align-items: center;
      }
      .type img,.trade img,.region img{
        margin-right: 10px;
      }
      /* table盒子 */
      .tab{
        width: 706px;
        height: 554px;
        margin: 0 auto;
      }
      /* 蓝色线 */
      .hr1{
        position: relative;
        background-color: #6db6ff;
        height: 1px;
        top: 96px;
      }
      .hr2{
        width: 70px;
        height: 1px;
        position: relative;
        background-color: #6db6ff;
        top: 64px;
        left: -70px;
      }
      .hr3{
        width: 70px;
        height: 1px;
        position: relative;
        background-color: #6db6ff;
        top: 64px;
        left: 706px;
      }
      /* 三角形 */
      .triangle2{
        border-width: 15px 8px;
        border-style: solid;
        border-color:  transparent transparent #6db6ff #6db6ff;
        width: 0;
        position: relative;
        top: 63px;
        left: 0px;
      }
      .triangle3{
        border-width: 15px 8px;
        border-style: solid;
        border-color:  transparent#6db6ff #6db6ff transparent ;
        width: 0;
        position: relative;
        top: 34px;
        left: 690px;
      }
      /* 底部 */
      .bottom{
        /* background-color: lightgreen; */
        margin: 0 auto;
        width: 1000px;
        text-align: left;
        position: relative;
      }
      /* 底部图片 */
      .bottom img{
        position: absolute;
        top: 10px;
        left: 400px;
      }
      /* 底部蓝条 */
      .blue_block{
        width: 1000px;
        height: 70px;
        background-color: #6db6ff;
        position: absolute;
        top: 130px;
      }
    </style>
  </head>
  <body>
    <div class="all">
      <div class="rectangle1"></div>
      <div class="top">
        <div class="logo">
          <img src="./img/logo.png" alt="" />
        </div>
        <ul>
          <li>首页&nbsp;</li>
          <li>鼎搜投资&nbsp;</li>
          <li>鼎搜服务&nbsp;</li>
          <li>鼎搜动态&nbsp;</li>
          <li>鼎搜诚聘&nbsp;</li>
          <li>鼎搜公益&nbsp;</li>
        </ul>
        <div class="search">
          <input type="text" />
        </div>
      </div>
      <div class="tupian">
        <img src="./img/ee7314461b78d4f3723ea4254019fcca.png" alt="" />
      </div>
      <div class="content">
        <!-- 当前位置 -->
        <div class="location">
          <div class="rectangle2" style="color: white;">当前位置</div>
          <div class="triangle"></div>
          <div class="zhuye">:主页>我要投资>投资列表</div>
          </div>
          <div class="center">
            <!-- 类型 -->
            <div class="type" style="margin-top: 30px;">
              <img src="./img/1.png" alt=""/>
              <p>按类型:</p>
              <span style="color: skyblue;font-size: 14px;">全部&nbsp;</span>
              <span style="font-size: 12px;"
                >股权转让 债权转让 实物资产 工美藏品 知识产权 房产 矿权 林权
                融资 更多
              </span>
            </div>
            <!-- 行业 -->
            <div class="trade">
              <img src="./img/2.png" alt="">
              <p>按行业:</p>
              <span style="color: skyblue;font-size: 14px;">全部&nbsp;</span>
              <span style="font-size: 12px;">房地产业 电子通讯 电力工业 煤炭工业 冶金矿产 机械制造 基础设施 建筑建材 物流仓储 更多</span>
            </div>
            <!-- 地区 -->
            <div class="region">
              <img src="./img/3.png" alt="">
              <p>按地区:</p>
              <span style="color: skyblue;font-size: 14px;">全部&nbsp;</span>
              <span style="font-size: 12px;">北京 天津 上海 重庆 河北 山西 浙江 辽宁 吉林 湖北 江苏 安徽 福建 江西 台湾 香港 澳门 广东 更多</span>
            </div>
          </div>
          <div class="tab">
            <!-- 蓝色线 -->
            <div class="hr1"><hr style="position: absolute;"></div>
            <div class="hr2"><hr style="position: absolute;"></div>
            <div class="hr3"><hr style="position: absolute;"></div>
            <!-- 三角形 -->
            <div class="triangle2"></div>
            <div class="triangle3"></div>
            <table cellspacing="10" cellpadding="10" height="544" width="706" style="margin-top: -20px;">
              <tr>
                <th>项目名称</th>
                <th>所在地区</th>
                <th>行业</th>
                <th>类型</th>
                <th>发布时间</th>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
              <tr>
                <td>[广州天河龙洞] 可圈可点茶餐厅</td>
                <td>广东</td>
                <td>餐饮餐馆</td>
                <td>股权转让</td>
                <td>2015-06-09</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="button" style="text-align: center;margin-top: 20px;">
          <!-- 底部按钮 -->
          <button>上一页</button>
          <button style="background-color: #6db6ff;color: white;">1</button>
          <button>2</button>
          <button>3</button>
          <button>4</button>
          <button>5</button>
          <button>下一页</button>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <table height="120" width="680">
          <tr>
            <th>简介</th>
            <th>帮助</th>
            <th>共赢</th>
            <th>导航</th>
          </tr>
          <tr>
            <td>鼎搜网简介</td>
            <td>用户注册</td>
            <td>网站合作</td>
            <td>地图首页</td>
          </tr>
          <tr>
            <td>鼎搜服务</td>
            <td>关于鼎搜</td>
            <td>用户协议</td>
            <td>职能分类</td>
          </tr>
          <tr>
            <td>会员身份实名认证</td>
            <td>在线咨询</td>
            <td>会员身份实名认证</td>
            <td>企业名录</td>
          </tr>
        </table>
        <!-- 底部蓝条 -->
        <div class="blue_block"></div>
        <img src="./img/订阅信息.png" alt="">
      </div>
    </div>
  </body>
</html>
